var STViewSlider = function( DIV_ViewStage )
{
	var _this 				= this;
	var _stage 				= DIV_ViewStage;
	_stage.style.position	= "relative";
	_stage.style.display	= "inline-block";
	_stage.style.overflow	= "hidden";
	
	var _board				= document.createElement( "div" );
	_board.className		= "board";
	_board.style.position	= "relative";
	_board.style.margin		= "0px";
	_board.style.padding	= "0px";
	_stage.appendChild( _board );
	// 시퀀스 배열
	var _queue 		= [];
	var _pageA		= createPage();
	var _pageB		= createPage();
	_board.appendChild( _pageA );
	_board.appendChild( _pageB );
	// 슬라이드 추가
	this.push = function( content )
	{
		if( content == null ) return;
		var _isTween = (arguments[1] != false);
		_queue.push( content );
		if( _queue.length <= 1 )
		{
			addPageContent( _pageA, content );
			if( _isTween ) tweenHorizontal( 0 );
		}else{
			addPageContent( _pageA, _queue[ _queue.length-2 ] );
			addPageContent( _pageB, content );
		
			if( _isTween ) 
			{
				_board.style.left = "0px";
				tweenHorizontal( -_stage.clientWidth );
			}
		}
		updateContainerWidth();
	}
	
	
	// 슬라이드 빼기
	this.pop = function()
	{
		if( _queue.length <= 1 ) return null;
		var _isTween = (arguments[0] != false);
		var _c = _queue.pop();
		
		if( _queue.length == 0 )
		{
			addPageContent( _pageA, _c );
			clearPage( _pageB );
			if( _isTween ) tweenHorizontal( _stage.clientWidth );
		}else{
			addPageContent( _pageA, _queue[ _queue.length-1 ] );
			addPageContent( _pageB, _c );
			if( _isTween ) 
			{
				_board.style.left = (-_stage.clientWidth)+"px";
				tweenHorizontal( 0 );
			}else{
				
			}
		}
		updateContainerWidth();
		return _c;
	}
	this.clear = function()
	{
		clearPage( _pageA );
		clearPage( _pageB );
		updateContainerWidth();
	}
	this.length = function()
	{
		return _queue.length;
	}
	this.getStage = function()
	{
		return _stage;
	}
	this.getContainer = function()
	{
		return _board;
	}
	
	this.getContentOfPageA = function()
	{
		return _pageA.firstChild;
	}
	this.getContentOfPageB = function()
	{
		return _pageB.firstChild;
	}
	
	
	// [ Call Back ]
	// CB1. 슬라이드컨텐츠의 사이즈가 변할 경우
	this.onTweenComplete;
	
	window.addEventListener( "resize", onResize );
	function onResize( e )
	{
		updateSizeContentContainer( _pageA );
		updateSizeContentContainer( _pageB );
		updateContainerWidth();
		//_board.style.left = (_stage.cliendWidth*-0.5)+"px";
	}
	
	// 이하 관리 메서드
	function tweenHorizontal( _x )
	{
		STTween.clear( _board );
		// 효과
		STTween.to( _board , 0.36, {left:_x, ease:STEaseLite.easeOutCubic, onComplete: onRemovedContent } );
	}
	function updateContainerWidth()
	{
		_board.style.width = ((_pageA.childNodes.length+_pageB.childNodes.length)*_stage.clientWidth)+"px";
	}
	function onRemovedContent()
	{
		if( _queue.length == 0 )
		{
			_this.clear();
		}else if( _board.style.left != "0px" )
		{
			_board.style.left = "0px";
			addPageContent( _pageA, _queue[ _queue.length-1 ] );
		}else{
			
		}
		clearPage( _pageB );
		updateContainerWidth();
		if( _this.onTweenComplete != undefined ) 
		{
			_this.onTweenComplete();
		}
	}
	
	this.refreshPages = function()
	{
		onRemovedContent();
	}
	
	
	// 사이즈를 위하 한번 더 렙핑하는 DIV 를 생성함
	function createPage()
	{
		
		var _d 				= document.createElement( "div" );
		_d.className 		= "page";
		_d.style.display	= "inline-block";
		_d.style.verticalAlign	= "top";
		updateSizeContentContainer( _d );	
		return _d;
	}
	function clearPage( page )
	{
		var _rtn = (page.firstChild != null);
		if( _rtn )
		{
			page.removeChild( page.firstChild );
		}
		updateSizeContentContainer( page );
		return _rtn;
	}
	function addPageContent( page, content )
	{
		if( page.firstChild != null ) page.removeChild( page.firstChild );
		if( content != null ) page.appendChild( content );
		updateSizeContentContainer( page );
	}
	function updateSizeContentContainer( _d )
	{
		if( _d.firstChild != null )
		{
			var _margin		= 0;
			_d.style.margin	= _margin+"px";
			_d.style.width	= (_stage.clientWidth-_margin*2)+"px";
			_d.style.height	= (_stage.clientHeight-_margin*2)+"px";
		}else{
			_d.style.margin	= "0px";
			_d.style.width	= "0px";
			_d.style.height	= "0px";
		}
	}
}